<template>
  <el-card class="analysis-container" shadow="hover">
    <div class="analysis-header">
      <h2><i class="el-icon-data-analysis"></i> 任务分析 - {{ taskDetail.title }}</h2>
      <el-button type="primary" @click="analyzeTaskQuality" :loading="isAnalyzing" icon="el-icon-refresh">
        {{ isAnalyzing ? '分析中...' : '获取大模型分析' }}
      </el-button>
    </div>
    
    <el-divider content-position="left">任务基本信息</el-divider>
    
    <div class="task-info">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="任务描述">{{ taskDetail.description }}</el-descriptions-item>
        <el-descriptions-item label="截止时间">{{ taskDetail.deadline }}</el-descriptions-item>
        <el-descriptions-item label="评分标准">{{ taskDetail.scoring_criteria }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="chart-header">
            <span><i class="el-icon-s-data"></i> 学生任务质量分布</span>
          </div>
          <div id="scoreChart" class="chart-container"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="chart-header">
            <span><i class="el-icon-s-grid"></i> 子任务完成情况</span>
          </div>
          <div id="subtaskChart" class="chart-container"></div>
          <div class="subtask-stats">
            <div class="stat-item">
              <div class="stat-value">{{ subtaskStats.total }}</div>
              <div class="stat-label">总子任务</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ subtaskStats.in_progress }}</div>
              <div class="stat-label">进行中</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ subtaskStats.on_time }}</div>
              <div class="stat-label">按时完成</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ subtaskStats.late }}</div>
              <div class="stat-label">逾期未交</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ subtaskStats.in_progress_not_approved }}</div>
              <div class="stat-label">不通过</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div v-if="analysisResult" class="analysis-result-section">
      <el-divider content-position="left">大模型分析结果</el-divider>
      
      <el-tabs type="border-card">
        <el-tab-pane label="任务完成情况">
          <div v-if="parsedAnalysis.task_completion" class="completion-stats">
            <el-progress type="dashboard" :percentage="getCompletionPercentage()" :status="getCompletionStatus()">
              <template #default="{ percentage }">
                <span class="progress-value">{{ percentage }}%</span>
                <span class="progress-label">完成率</span>
              </template>
            </el-progress>
            
            <div class="stats-grid">
              <div class="stat-box">
                <div class="stat-title">总任务数</div>
                <div class="stat-number">{{ parsedAnalysis.task_completion.total }}</div>
              </div>
              <div class="stat-box">
                <div class="stat-title">进行中</div>
                <div class="stat-number">{{ parsedAnalysis.task_completion.in_progress }}</div>
              </div>
              <div class="stat-box">
                <div class="stat-title">按时完成</div>
                <div class="stat-number">{{ parsedAnalysis.task_completion.on_time }}</div>
              </div>
              <div class="stat-box">
                <div class="stat-title">逾期未交</div>
                <div class="stat-number">{{ parsedAnalysis.task_completion.late }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="学生表现分析">
          <div v-if="parsedAnalysis.student_performance && parsedAnalysis.student_performance.length > 0">
            <div id="studentPerformanceChart" class="large-chart-container"></div>
            
            <el-table :data="parsedAnalysis.student_performance" stripe style="width: 100%" border>
              <el-table-column prop="username" label="学生姓名" width="120"></el-table-column>
              <el-table-column prop="quality" label="任务质量分" width="100">
                <template #default="{row}">
                  <el-tag :type="getScoreType(row.quality)">{{ row.quality }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="engagement" label="参与积极性" width="100">
                <template #default="{row}">
                  <el-tag :type="getScoreType(row.engagement)">{{ row.engagement }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="negotiate" label="协商分" width="100">
                <template #default="{row}">
                  <el-tag :type="getScoreType(row.negotiate)">{{ row.negotiate }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="on_time" label="准时完成" width="100">
                <template #default="{row}">
                  <el-tag :type="getScoreType(row.on_time)">{{ row.on_time }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="rematch_willingness" label="重组意愿" width="100">
                <template #default="{row}">
                  <el-tag :type="getScoreType(row.rematch_willingness)">{{ row.rematch_willingness }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="total" label="总分" width="100">
                <template #default="{row}">
                  <el-tag :type="getScoreType(row.total)" effect="dark">{{ row.total }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="performance" label="表现评级" width="100">
                <template #default="{row}">
                  <el-tag 
                    :type="row.performance === '优秀' ? 'success' : row.performance === '良好' ? 'warning' : 'info'"
                    effect="plain"
                  >
                    {{ row.performance }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
          
          <!-- 学生表现概述 -->
          <div v-if="parsedAnalysis.excellent_student || parsedAnalysis.focus_student" class="student-overview-section">
            <el-row :gutter="20">
              <el-col :span="12" v-if="parsedAnalysis.excellent_student">
                <el-card shadow="hover" class="student-overview-card">
                  <div slot="header" class="student-overview-header">
                    <span><i class="el-icon-star-on"></i> 优秀学生表现</span>
                  </div>
                  <div class="student-overview-content">{{ parsedAnalysis.excellent_student }}</div>
                </el-card>
              </el-col>
              <el-col :span="12" v-if="parsedAnalysis.focus_student">
                <el-card shadow="hover" class="student-overview-card">
                  <div slot="header" class="student-overview-header">
                    <span><i class="el-icon-warning"></i> 需关注学生</span>
                  </div>
                  <div class="student-overview-content">{{ parsedAnalysis.focus_student }}</div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          
          <!-- 学生表现详情 -->
          <div v-if="parsedAnalysis.student_details && parsedAnalysis.student_details.length > 0" class="student-details-section">
            <h4><i class="el-icon-user"></i> 学生表现详情</h4>
            <el-row :gutter="20">
              <el-col :span="12" v-for="(student, index) in parsedAnalysis.student_details" :key="index">
                <el-card shadow="hover" class="student-detail-card">
                  <div slot="header" class="student-detail-header">
                    <span>{{ student.username }}</span>
                  </div>
                  <div class="student-detail-content">
                    <div class="detail-item">
                      <div class="detail-label"><i class="el-icon-star-on"></i> 优点：</div>
                      <div class="detail-text">{{ student.优点 }}</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label"><i class="el-icon-warning-outline"></i> 不足：</div>
                      <div class="detail-text">{{ student.不足 }}</div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="小组表现分析">
          <div v-if="parsedAnalysis.group_performance" class="group-performance">
            <el-card shadow="hover" class="group-card">
              <div class="group-header">
                <h3>{{ parsedAnalysis.group_performance.group_name }} 小组</h3>
                <el-tag 
                  :type="parsedAnalysis.group_performance.overall_performance === '优秀' ? 'success' : 'warning'"
                  effect="dark"
                  size="medium"
                >
                  {{ parsedAnalysis.group_performance.overall_performance }}
                </el-tag>
              </div>
              
              <el-divider></el-divider>
              
              <div class="performance-grid">
                <div class="performance-item">
                  <div class="item-label">组长表现</div>
                  <el-tag 
                    :type="parsedAnalysis.group_performance.leader_performance === '优秀' ? 'success' : 'warning'"
                    effect="plain"
                    size="medium"
                  >
                    {{ parsedAnalysis.group_performance.leader_performance }}
                  </el-tag>
                </div>
                
                <div class="performance-item">
                  <div class="item-label">成员表现</div>
                  <el-tag 
                    :type="parsedAnalysis.group_performance.members_performance === '优秀' ? 'success' : 'warning'"
                    effect="plain"
                    size="medium"
                  >
                    {{ parsedAnalysis.group_performance.members_performance }}
                  </el-tag>
                </div>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="教师建议">
          <div v-if="parsedAnalysis.suggestions" class="suggestions-section">
            <!-- 教师建议 -->
            <div class="teacher-suggestions">
              <h4><i class="el-icon-s-opportunity"></i> 教师建议</h4>
              <el-card shadow="hover" class="suggestion-card">
                <ul class="suggestion-list">
                  <li v-for="(suggestion, index) in parsedAnalysis.suggestions.teacher_suggestions" :key="index">
                    {{ suggestion }}
                  </li>
                </ul>
              </el-card>
            </div>
            
            <!-- 学生建议 -->
            <div v-if="parsedAnalysis.suggestions.student_suggestions && parsedAnalysis.suggestions.student_suggestions.length > 0" class="student-suggestions">
              <h4><i class="el-icon-s-custom"></i> 学生建议</h4>
              <el-card shadow="hover" class="suggestion-card">
                <ul class="suggestion-list">
                  <li v-for="(suggestion, index) in parsedAnalysis.suggestions.student_suggestions" :key="index">
                    {{ suggestion }}
                  </li>
                </ul>
              </el-card>
            </div>
            
            <!-- 教学质量评价 -->
            <div v-if="parsedAnalysis.teaching_quality" class="teaching-quality">
              <h4><i class="el-icon-s-management"></i> 教学质量评价</h4>
              <el-card shadow="hover" class="quality-card">
                <div class="quality-content">{{ parsedAnalysis.teaching_quality }}</div>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>

<script>
import axios from '@/axiosInstance'
import { ref, onMounted, nextTick, computed } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'

export default {
  name: 'TaskAnalysis',
  setup() {
    const route = useRoute();
    const taskId = route.query.taskId;  // 确保路由中带有 ?taskId=xxx
    const taskDetail = ref({});
    const subtaskStats = ref({});
    const teacherScores = ref([]);
    const analysisResult = ref(null);
    const isAnalyzing = ref(false);
    
    // 解析分析结果
    const parsedAnalysis = computed(() => {
      if (!analysisResult.value) return {};
      
      try {
        // 如果返回的是字符串，尝试解析JSON
        if (typeof analysisResult.value === 'string') {
          return JSON.parse(analysisResult.value);
        }
        
        // 如果已经是对象，直接使用新的数据结构
        if (analysisResult.value.analysis) {
          console.log('分析结果包含analysis字段:', analysisResult.value.analysis);
          
          // 使用新的数据结构
          const result = {};
          
          // 直接使用analysis字段中的数据
          Object.assign(result, analysisResult.value.analysis);
          
          // 处理教师建议
          if (analysisResult.value.suggestions) {
            result.suggestions = {};
            
            // 处理教师建议 - 大作业内容
            if (analysisResult.value.suggestions['教师建议'] && analysisResult.value.suggestions['教师建议']['大作业内容']) {
              const assignmentSuggestions = analysisResult.value.suggestions['教师建议']['大作业内容'];
              // 将字符串按数字分割成数组
              const assignmentSuggestionsArray = assignmentSuggestions.split(/\d+\.\s/).filter(item => item.trim() !== '');
              result.suggestions.teacher_suggestions = assignmentSuggestionsArray;
            }
            
            // 处理学生建议
            if (analysisResult.value.suggestions['教师建议'] && analysisResult.value.suggestions['教师建议']['学生指导']) {
              const studentGuidance = analysisResult.value.suggestions['教师建议']['学生指导'];
              // 将字符串按数字分割成数组
              const studentGuidanceArray = studentGuidance.split(/\d+\.\s/).filter(item => item.trim() !== '');
              result.suggestions.student_suggestions = studentGuidanceArray;
            }
            
            console.log("教师建议和学生建议", result.suggestions.teacher_suggestions, result.suggestions.student_suggestions);
          }
          
          // 处理教学质量
          if (analysisResult.value.analysis.teaching_quality) {
            result.teaching_quality = analysisResult.value.analysis.teaching_quality;
          }
          
          return result;
        }
        
        return analysisResult.value;
      } catch (error) {
        console.error('解析分析结果失败:', error);
        return {};
      }
    });

    const fetchTaskAnalysisData = async () => {
      try {
        const response = await axios.get("http://39.105.217.183:8000/api/get-task-analysis-data/", {
          params: { task_id: taskId }
        });
        const data = response.data;
        console.log("后端返回:", data);
        taskDetail.value = data.task;
        subtaskStats.value = data.subtask_stats;
        teacherScores.value = data.scores;
        console.log("teacherScores:", teacherScores.value);
        // 等数据赋值后再调用 nextTick
        nextTick(() => {
          initScoreChart();
          initSubtaskChart();
        });
      } catch (error) {
        console.error("获取任务分析数据失败：", error);
      }
    };

    const initScoreChart = () => {
      const chartDom = document.getElementById("scoreChart");
      if (!chartDom) {
        console.warn("未找到 scoreChart 容器");
        return;
      }
      // 过滤掉没有 student 或 student.username 的记录
      const validScores = teacherScores.value.filter(
        score => score.username
      );
      
      if (validScores.length === 0) {
        console.warn("没有可用的学生数据，图表将不显示");
        return;
      }

      const studentNames = validScores.map(score => score.username);
      const qualityScores = validScores.map(score => score.quality);
      const totalScores = validScores.map(score => score.total);

      const myChart = echarts.init(chartDom);
      const option = {
        title: { 
          text: "学生成绩分布", 
          left: "center",
          textStyle: {
            fontWeight: 'bold',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['质量分', '总分'],
          bottom: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '15%',
          containLabel: true
        },
        xAxis: { 
          type: "category", 
          data: studentNames,
          axisLabel: {
            rotate: 45,
            interval: 0
          }
        },
        yAxis: { 
          type: "value",
          max: 100
        },
        series: [
          {
            name: "质量分",
            type: "bar",
            data: qualityScores,
            itemStyle: { color: "#409EFF" }
          },
          {
            name: "总分",
            type: "bar",
            data: totalScores,
            itemStyle: { color: "#67C23A" }
          }
        ]
      };
      myChart.setOption(option);

      // 如果页面大小改变时需要自适应
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    };
    
    // 初始化子任务完成情况图表
    const initSubtaskChart = () => {
      const chartDom = document.getElementById("subtaskChart");
      if (!chartDom) {
        console.warn("未找到 subtaskChart 容器");
        return;
      }
      
      const stats = subtaskStats.value;
      if (!stats || !stats.total) {
        console.warn("没有可用的子任务数据，图表将不显示");
        return;
      }
      
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['进行中', '按时完成', '不通过', '逾期未交']
        },
        series: [
          {
            name: '任务状态',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: '{b}: {c}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: stats.in_progress, name: '进行中', itemStyle: { color: '#409EFF' } },
              { value: stats.on_time, name: '按时完成', itemStyle: { color: '#67C23A' } },
              { value: stats.in_progress_not_approved, name: '不通过', itemStyle: { color: '#F56C6C' } },
              { value: stats.late, name: '逾期未交', itemStyle: { color: '#E6A23C' } }
            ]
          }
        ]
      };
      
      myChart.setOption(option);
      
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    };
    
    // 初始化学生表现雷达图
    const initStudentPerformanceChart = () => {
      const chartDom = document.getElementById("studentPerformanceChart");
      if (!chartDom || !parsedAnalysis.value.student_performance) {
        return;
      }
      
      const students = parsedAnalysis.value.student_performance;
      if (students.length === 0) return;
      
      const myChart = echarts.init(chartDom);
      
      const indicators = [
        { name: '任务质量', max: 100 },
        { name: '参与积极性', max: 100 },
        { name: '协商能力', max: 100 },
        { name: '准时完成', max: 100 },
        { name: '重组意愿', max: 100 }
      ];
      
      const seriesData = students.map(student => ({
        name: student.username,
        value: [
          student.quality,
          student.engagement,
          student.negotiate,
          student.on_time,
          student.rematch_willingness
        ]
      }));
      
      const option = {
        color: ['#67C23A', '#409EFF', '#E6A23C', '#F56C6C', '#909399'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: students.map(s => s.username),
          bottom: 0
        },
        radar: {
          indicator: indicators,
          radius: '65%'
        },
        series: [{
          type: 'radar',
          data: seriesData
        }]
      };
      
      myChart.setOption(option);
      
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    };

    const analyzeTaskQuality = async () => {
      if (isAnalyzing.value) return;
      
      isAnalyzing.value = true;
      try {
        const payload = {
          task_data: {
            task: taskDetail.value,
            scores: teacherScores.value,
            subtask_stats: subtaskStats.value,
          }
        };
        const response = await axios.post("http://39.105.217.183:8000/api/analyze-task-quality/", payload, { timeout: 60000 });
        analysisResult.value = response.data;
        console.log("分析结果：", analysisResult.value);
        
        // 分析结果返回后初始化相关图表
        nextTick(() => {
          initStudentPerformanceChart();
        });
      } catch (error) {
        console.error("分析任务质量失败：", error);
      } finally {
        isAnalyzing.value = false;
      }
    };
    
    // 获取完成百分比
    const getCompletionPercentage = () => {
      if (!parsedAnalysis.value || !parsedAnalysis.value.task_completion) return 0;
      
      const completion = parsedAnalysis.value.task_completion;
      const total = completion.total || 1; // 避免除以0
      const completed = completion.on_time || 0;
      
      return Math.round((completed / total) * 100);
    };
    
    // 获取完成状态
    const getCompletionStatus = () => {
      const percentage = getCompletionPercentage();
      if (percentage >= 80) return 'success';
      if (percentage >= 50) return 'warning';
      return 'exception';
    };
    
    // 获取分数对应的标签类型
    const getScoreType = (score) => {
      if (score >= 85) return 'success';
      if (score >= 70) return 'warning';
      if (score >= 60) return 'info';
      return 'danger';
    };
    
    // 格式化进度条显示
    const format = (percentage) => `${percentage}%`;

    onMounted(() => {
      fetchTaskAnalysisData();
    });

    return {
      taskDetail,
      subtaskStats,
      teacherScores,
      analysisResult,
      parsedAnalysis,
      isAnalyzing,
      analyzeTaskQuality,
      getCompletionPercentage,
      getCompletionStatus,
      getScoreType,
      format
    }
  }
}
</script>

<style scoped>
.analysis-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  background-color: #fff;
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.analysis-header h2 {
  font-size: 1.8rem;
  color: #303133;
  margin: 0;
  display: flex;
  align-items: center;
}

.analysis-header h2 i {
  margin-right: 10px;
  color: #409EFF;
}

.task-info {
  margin: 20px 0 30px 0;
}

.chart-row {
  margin: 30px 0;
}

.chart-card {
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.chart-header {
  font-size: 1.1rem;
  font-weight: 600;
  color: #303133;
}

.chart-header i {
  margin-right: 5px;
  color: #409EFF;
}

.chart-container {
  width: 100%;
  height: 300px;
  margin: 15px 0;
}

.large-chart-container {
  width: 100%;
  height: 400px;
  margin: 20px 0;
}

.subtask-stats {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.stat-item {
  text-align: center;
  padding: 10px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #409EFF;
}

.stat-label {
  font-size: 0.85rem;
  color: #909399;
  margin-top: 5px;
}

.analysis-result-section {
  margin-top: 40px;
}

.completion-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.progress-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: #303133;
}

.progress-label {
  font-size: 0.9rem;
  color: #909399;
  display: block;
  margin-top: 5px;
}

.stats-grid {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 30px;
  width: 100%;
}

.stat-box {
  text-align: center;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 8px;
  min-width: 120px;
  margin: 10px;
}

.stat-title {
  font-size: 0.9rem;
  color: #606266;
  margin-bottom: 8px;
}

.stat-number {
  font-size: 1.6rem;
  font-weight: 600;
  color: #409EFF;
}

.group-performance {
  padding: 20px;
}

.group-card {
  border-radius: 8px;
  overflow: hidden;
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.group-header h3 {
  margin: 0;
  font-size: 1.3rem;
  color: #303133;
}

.performance-grid {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.performance-item {
  text-align: center;
  padding: 15px;
}

.item-label {
  font-size: 1rem;
  color: #606266;
  margin-bottom: 10px;
}

.suggestions-section {
  padding: 20px;
}

.teacher-suggestions,
.student-feedback,
.focus-students {
  margin-bottom: 30px;
}

.teacher-suggestions h4,
.student-feedback h4,
.focus-students h4,
.student-suggestions h4,
.teaching-quality h4 {
  font-size: 1.2rem;
  color: #303133;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.teacher-suggestions h4 i,
.student-feedback h4 i,
.focus-students h4 i,
.student-suggestions h4 i,
.teaching-quality h4 i {
  margin-right: 8px;
  color: #409EFF;
}

.suggestion-card,
.feedback-card,
.quality-card {
  margin-bottom: 25px;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.suggestion-card:hover,
.feedback-card:hover,
.quality-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.suggestion-list {
  padding-left: 20px;
  margin: 0;
}

.suggestion-list li {
  margin-bottom: 12px;
  line-height: 1.6;
  position: relative;
  padding-left: 5px;
}

.suggestion-list li:before {
  content: '';
  position: absolute;
  left: -10px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #409EFF;
}

.quality-content {
  padding: 15px;
  line-height: 1.8;
  color: #606266;
  text-indent: 2em;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.teacher-suggestions,
.student-suggestions,
.teaching-quality {
  margin-bottom: 30px;
}

.feedback-header {
  margin-bottom: 10px;
}

.student-name {
  font-weight: 600;
  color: #303133;
}

.feedback-content {
  color: #606266;
  line-height: 1.5;
}

.focus-tag {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 8px 12px;
}

/* 学生详情卡片样式 */
.student-details-section {
  margin-top: 30px;
}

.student-details-section h4 {
  font-size: 1.2rem;
  color: #303133;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.student-details-section h4 i {
  margin-right: 8px;
  color: #409EFF;
}

.student-detail-card {
  margin-bottom: 20px;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.student-detail-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.student-detail-header {
  font-weight: 600;
  color: #303133;
  font-size: 1.1rem;
}

.student-detail-content {
  padding: 10px 0;
}

.detail-item {
  margin-bottom: 15px;
}

.detail-label {
  font-weight: 600;
  color: #606266;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.detail-label i {
  margin-right: 5px;
}

.detail-text {
  color: #606266;
  line-height: 1.6;
  padding-left: 5px;
  border-left: 3px solid #409EFF;
  background-color: #f5f7fa;
  padding: 10px 15px;
  border-radius: 0 4px 4px 0;
}

/* 学生概述卡片样式 */
.student-overview-section {
  margin-top: 30px;
  margin-bottom: 30px;
}

.student-overview-card {
  margin-bottom: 20px;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.student-overview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.student-overview-header {
  font-weight: 600;
  color: #303133;
  font-size: 1.1rem;
}

.student-overview-content {
  padding: 15px;
  line-height: 1.8;
  color: #606266;
  background-color: #f8f9fa;
  border-radius: 4px;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}
</style>